.neo-rangefield {
    .neo-rangefield-input {
        margin-top: 12px;
        flex:1;
    }

    input[type=range] {
        background-color  : transparent;
        -webkit-appearance: none;

        &:focus {
            outline: none;
        }
    }

    input[type=range]::-moz-range-track, {
        background   : var(--rangefield-track-background);
        border-radius: 2px;
        cursor       : pointer;
        height       : 4px;
        margin-top   : -8px;
        width        : 100%;
    }

    input[type=range]::-webkit-slider-runnable-track {
        background   : var(--rangefield-track-background);
        border-radius: 2px;
        cursor       : pointer;
        height       : 4px;
        margin-top   : -8px;
        width        : 100%;
    }

    input[type=range]::-moz-range-thumb {
        background   : var(--rangefield-thumb-background);
        border-color : #3c3f41;
        border-radius: 50%;
        cursor       : ew-resize;
        height       : 15px;
        margin-top   : -5px;
        width        : 15px;
        will-change  : box-shadow;

        &:active {
            box-shadow: 0 0 0 4px rgba(51, 153, 204, 0.49);
        }
    }

    input[type=range]::-webkit-slider-thumb {
        background   : var(--rangefield-thumb-background);
        border-color : #3c3f41;
        border-radius: 50%;
        cursor       : ew-resize;
        height       : 15px;
        margin-top   : -5px;
        width        : 15px;
        will-change  : box-shadow;

        -webkit-appearance: none;

        &:active {
            box-shadow: 0 0 0 4px rgba(51, 153, 204, 0.49);
        }
    }
}
